<template>
    <div style="height: 100vh;overflow: hidden;">
        <navbar :title="$t('approval_details')"></navbar>
        <div class="content-noBottom white-bg" style="overflow: auto;" :style="{'padding-bottom' : detail.detail && detail.msgReceipt === 1 ? '56px' : '0'}">
            <div v-if="detail">
              <div class="content-box">
                <div class="item">
                  <span class="title">{{$t('leave_person')}}：</span>
                  <span class="info">{{detail.name || '--'}}</span>
                </div>
                <div class="item">
                  <span class="title">{{$t('work_unit')}}：</span>
                  <span class="info">{{detail.unit || '--'}}</span>
                </div>
                <div class="item">
                  <span class="title">{{$t('reason_taking_leave')}}：</span>
                  <span class="info">{{detail.alReason || '--'}}</span>
                </div>
                <div class="item">
                  <span class="title">{{$t('leave_type')}}：</span>
                  <span class="info">{{detail.alType === 0 ? $t('leave_absence') : detail.alType === 1 ? $t('sick_leave') : detail.alType === 2 ? $t('public_leave') : '--'}}</span>
                </div>
                <div class="item">
                  <span class="title">{{$t('leave_time')}}：</span>
                  <span class="info">{{detail.alStartTime || '--'}} ~ {{detail.alEndTime || '--'}}</span>
                </div>
                <div class="item">
                  <span class="title">{{$t('mod_submit_time')}}：</span>
                  <span class="info">{{detail.alSubTime || '--'}}</span>
                </div>
                <div class="item">
                  <span class="title">{{$t('approval_status')}}：</span>
                  <span class="info" v-if="detail.alStatus === 0" style="color: #F7A842;">{{$t('cos_app_pending')}}</span>
                  <span class="info" v-if="detail.alStatus === 1" style="color: #95C945;">{{$t('group_approved')}}</span>
                  <span class="info" v-if="detail.alStatus === 2" style="color: #E2394E;">{{$t('cos_app_rejected')}}</span>
                </div>
                <div class="item">
                  <span class="title">{{$t('approval_time_name')}}：</span>
                  <span class="info">{{detail.alAppTime}}</span>
                </div>
                <div class="item" v-if="detail.alStatus === 2">
                  <span class="title">{{$t('refuse_reason')}}：</span>
                  <span class="info">{{detail.alaReason}}</span>
                </div>
              </div>
            </div>
        </div>
        <!-- 回复状态0未回复1同意2拒绝 -->
        <div class="detail-btnRead" v-if="detail.alStatus === 0">
            <div @click="openModal()">
                {{$t('approval_btn')}}
            </div>
        </div>
        <div class="detail-btnRead gray-btn" v-if="detail.alStatus !== 0">
            <div>
                {{$t('approval_btn')}}
            </div>
        </div>
        <van-action-sheet v-model="isShow" title="">
            <div class="modal-box">
                <div class="from-box">
                    <div class="from-item">
                        <span>{{$t('responses')}}：</span>
                        <van-radio-group v-model="addData.alaOpinion" direction="horizontal">
                            <van-radio :name="1">{{$t('group_approved_btn')}}</van-radio>
                            <van-radio :name="2">{{$t('approve_status_3')}}</van-radio>
                        </van-radio-group>
                    </div>
                    <div class="from-item" style="position: relative;">
                        <span v-if="addData.alaOpinion===2" style="color:red;position: absolute;left: -6px;top: 3px;" >*</span>
                        <span>{{$t('refuse_reason')}}：</span>
                        <van-field style="border: 1px solid #DCDFE6;"
                            v-model="addData.alaReason"
                            rows="3"
                            autosize
                            :border="true"
                            type="textarea"
                            maxlength="400"
                            placeholder=""
                            />
                    </div>
                </div>
                <div class="modal-btn">
                    <div class="cancel" @click="isShow=false;">{{$t('cancel')}}</div>
                    <div class="queren" @click="sendFreshReceipt">{{$t('button_submit')}}</div>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>

<script>
import {ActionSheet, RadioGroup, Radio, Field, Toast} from 'vant';
export default {
    name: 'LeaveApprovalDetail',
    components: {ActionSheet, RadioGroup, Radio, Field},
    data() {
        return {
            detail: {},
            tcenter: '',
            addData: {
                alId: null,
                alaOpinion: 1,
                alaReason: ''
            },
            isShow: false
        };
    },
    methods: {
        getFreshInvitationDetail() {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/leave/app-detail/${this.$route.params.id}`
            }).then(res => {
                this.detail = res.data;
            });
        },
        openModal() {
            this.addData = {
                alId: this.detail.id,
                alaOpinion: 1,
                alaReason: ''
            };
            this.isShow = true;
        },
        sendFreshReceipt() {
            if (this.addData.alaOpinion === 2 && !this.addData.alaReason) {
                Toast(this.$t('please_input_refuse_reason'));
                this.isShow = true;
                return false;
            }
            this.addData.alaOpinion === 1 ? this.addData.alaReason = '' : this.addData.alaReason = this.addData.alaReason;
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/leave/app`,
                data: this.addData
            }).then(() => {
                Toast.success(this.$t('leave_approval_successful'));
                this.isShow = false;
                this.getFreshInvitationDetail();
            });
        }
    },
    mounted() {
        this.tcenter = this.$route.params.tcenter;
        this.getFreshInvitationDetail();
    }
};
</script>

<style scoped lang="less">
    .content-noBottom{
        margin: 69px 12px;
        height: calc( 100vh - 138px);
        border-radius: 5px;
        padding: 0;
        .detail-title{
            font-size: 16px;
            font-weight: normal;
            padding: 20px 15px 10px;
        }
        .detail-time{
            color: #aaa;
            margin: 0 15px;
            font-size: 12px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        .detail-content{
            padding: 20px 0;
            border-bottom: 1px solid #eee;
            margin: 0 15px;
            font-size: 14px;
        }
    }
    .gray-btn{
        div{
            background: #D7D7D7;
        }
    }
    .modal-box{
        height: 235px;
        padding: 20px 15px;
        box-sizing: border-box;
        .from-box{
            .from-item{
                display: flex;
                align-items: flex-start;
                margin-bottom: 15px;
                span{
                    width: 70px;
                    display: inline-block;
                }
                .van-cell{
                    width: calc( 100% - 70px);
                }
                /deep/.van-radio__icon--checked .van-icon{
                    background-color: #075ebb;
                    border-color: #075ebb;
                }
            }
        }
        .modal-btn{
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 25px;
            padding-bottom: 10px;
            div{
                width: 40%;
                border-radius: 4px;
                height: 35px;
                line-height: 35px;
                text-align: center;
            }
            .cancel{
                border: 1px solid #075ebb;
                color: #075ebb;
            }
            .queren{
                background: #075ebb;
                color: white;
            }
        }
    }
    /deep/.van-popup--bottom.van-popup--round{
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .content-box {
      width: 90%;
      margin: 0 auto;
      .item{
        display: flex;
        margin-top: 15px;
        align-items: center;
        .title{
          width: 100px;
          text-align: right;
          display: inline-block;
          margin-right: 10px;
        }
        .info{
          display: inline-block;
          width: calc( 100% - 100px);
        }
      }
    }
</style>
